<template>
  <div class="home-page">
    <div class="swiper-container" :style="{'height':swiperHeight+'px'}">
      <div class="sanjiao">
        <img src="../../assets/sanjiao.png" alt="">
        <img src="../../assets/down.png" alt="" class="down-jiantou">
      </div>
      <div class="swiper-wrapper">
        <div class="swiper-slide box1">
          <div>
            <span>OXFORD INTERNATIONAL COLLEGE</span>
            <span>牛津国际高中</span>

          </div>
          <div>
            <span>UK's Top Performing Sixth Form College</span>
            <span>英国表现最佳的Six Form学院</span>
          </div>
        </div>

      </div>
      <!-- Add Pagination -->
      <!--      <div class="swiper-pagination"></div>-->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>

    <div class="main-center">
      <div style="margin-top: 50px;">
        <img src="../../assets/oic/oic.jpg" alt="">
      </div>
      <div class="mid">
        <div>
          <p><span>牛津国际高中（OIC）是英国最好的Six Form学院，提供A-Level课程、GCSE课程和一系列短期课程。我们帮助学生做好准备，攻读世界顶尖大学热门学位。</span></p>
          <p>在长达1000年的时间里，牛津一直以卓越的学术成就闻名于世。位于牛津的牛津国际高中为学生提供了开放的、激励的学习环境。我们的学生有机会见到一些世界上最聪明的人并向他们学习。良好的氛围有利于学生的学业发展和个人成长，同时学生也可以尽情享受牛津这座美丽城市丰富多彩的文化生活。</p>
          <p>学校距离牛津市中心很近，步行不久即可到达。学校吸引了来自世界各地的学生和教职工，是一个充满活力的国际团体。学生们由一些牛津最好的导师教授，他们都是各自领域的专家，大多数是牛津大学毕业生或拥有牛津大学的博士学位。</p>
          <p>年轻学生是这个世界的未来和希望。牛津国际高中非常期待各位来到牛津，加入我们，在您人生旅程的起点为您提供支持和帮助。</p>
          <p style="margin-bottom: 0"><span>成绩一览</span></p>
          <p>2019年，我们被《泰晤士报》学校联盟、《每日电讯报》学校联盟和教育顾问私立学校联盟评选为全国表现最好的学院。2020年，我们续写辉煌成就，以优异的大学录取成绩证明了我们卓越的教学质量。</p>
          <p>我们为2020年的大学录取成绩深感自豪：</p>
          <ul>
            <li><span>-三分之一的申请者获得了牛津或剑桥大学的录取通知；</span></li>
            <li>- 58.6%的学生被牛津大学、剑桥大学、伦敦大学学院、伦敦帝国学院和伦敦政治经济学院（所谓的G5，或英国最好的五所大学）录取。</li>
            <li>- 我们还收到了26所世界顶级医学院的63份医学专业录取通知书(70名学生申请了相关学位) ，再一次巩固了我们作为医学招生专家的声誉。</li>
          </ul>
          <p>我们相信这些优异的成绩是完全基于量身定制和个性化原则建立的教育模式的直接成果。我们不仅仅教授学科课程，更重要的是培养学生对职业的热情。</p>
        </div>
        <div>
          <p style="margin-bottom: 0"><span>课程设置</span></p>
          <p>入学之初，我们就会帮助每一个学生定制<strong>个性化的策略性国际预科课程</strong>，学生能根据想要实现的学业目标来调整自己的课程。定制课程和由学科教师和个人导师组成的专业团队可帮助学生选择正确的职业道路、学位课程和理想大学，然后制定计划，帮助学生最大程度实现目标。</p>
          <p><span>策略性国际预科课程有三个组成部分，与我们课程的三大支柱相对应：</span></p>
          <ul>
            <li><span>- 学术卓越</span></li>
            <li><span>- 职业生涯发展</span></li>
            <li><span>- 个人发展</span></li>
          </ul>
          <p>牛津国际高中可根据学生首选学位的需要提供所有科目的课程。从学生被我们学校录取的那一刻起，专业的学术专家团队就将帮助学生制定有效的个人策略，包括需要学习的科目、需要参加的职业相关活动和课外活动等，最大程度适配他们的个人目标。</p>
          <p style="margin-bottom: 0"><span>学院生活</span></p>
          <p>学院的教牧团队会帮助学生适应学院和寄宿生活，并在整个学习期间持续为学生提供支持。宿舍管理员和舍监与寄宿学生一起居住生活。我们致力在学院为远离家乡的学生创造一种家的感觉：个人的需求得到满足；相互尊重；对学院有一种团体归属感，从而营造一种友好亲切的氛围。截至2020年，我们拥有四个寄宿公寓和两个食堂。</p>
          <p>学生可以参加牛津大学体育俱乐部。该俱乐部距学校和学生宿舍很近，步行即可到达。俱乐部全年都有各种各样的活动和比赛，每个人都有机会参加。</p>
          <p>我们注重培养学生的责任感，既要对自己负责，追求卓越，也要有使我们生活的世界变得更加美好的使命感。我们极具创新性的课程最大限度帮助学生做好准备，在大学面试、高等教育和以后的职业生涯中获得成功。</p>
        </div>
      </div>

      <div class="fangwen">
        <a href="https://www.oxcoll.com/" target="_blank">访问我们的网站</a>
      </div>
    </div>

    <div class="map">
      <div>
        <div>
          <img src="../../assets/biaoji.png" alt="" class="biaoji-size">
        </div>
        <div>
          <span><strong style="font-size: 18px;line-height: 32px">联系方式</strong></span>
          <span style="margin-bottom: 40px;"><strong style="font-size: 18px;margin-bottom: 40px;">牛津国际高中</strong></span>
          <span>Oxford International College</span>
          <span>1 London Place,</span>
          <span>Oxford OX4 1BD</span>
          <span>+44(0)1865 203988</span>
          <span>info@oxcoll.com</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import swiper from '../../assets/swiper/swiper-bundle.min'
  export default {
    name: "index",
    created() {
      let H = window.innerHeight

      this.swiperHeight = H
    },
    mounted() {
      var swiper = new Swiper('.swiper-container', {
        // spaceBetween: 30,
        centeredSlides: true,
        /*autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },*/
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
    }
  }
</script>

<style scoped lang="scss">
.main-center{
max-width: 1200px;
  margin: 0 auto;
}
.swiper-container {
  width: 100%;
  height: 1000px;
  position: relative;
}
.sanjiao{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
  z-index: 222;
  img{
    width: 120px;
    display: block;
  }
  span{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    display: block;
    text-align: center;
    color: #303030;
    z-index: 999;
  }
  .down-jiantou {
    position: absolute;
    left: 50%;
    margin-left: -19px;
    bottom: 9px;
    width: 38px;
    animation: shangxia 0.7s linear infinite;
  }
  @keyframes shangxia {
    0% {bottom: 9px}
    50%{bottom: 3px}
    100%{bottom: 9px}
  }
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide>div:nth-of-type(1){
  margin: 60px 0;
  margin-bottom: 35px;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.65);
  padding: 20px 35px;
}
.swiper-slide>div:nth-of-type(1) span:nth-of-type(1){
  font-size: 17px;
  color: #303030;
  margin-bottom: 20px;
}
.swiper-slide>div:nth-of-type(1) span:nth-of-type(2){
  font-size: 25px;
  font-weight: bold;
  color: #303030;
}
.swiper-slide>div:nth-of-type(2){
  display: flex;
  flex-direction: column;
  padding: 10px 40px;
  background: rgba(255,255,255,.65);transition: all .4s ease;cursor: pointer;
}
.swiper-slide>div:nth-of-type(2) span{



  line-height: 32px;
  font-size: 18px;
  color: #303030;
}
.swiper-slide>div:nth-of-type(2):hover{
  background: #3281c4;
}
.box{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box1{
  background: url("../../assets/oic/Oxford.International.English0513a.jpg") no-repeat center center;
}
.box2{
  background: url("../../assets/UP-2.jpg") no-repeat center center;
}
.box3{
  background: url("../../assets/UP-3.jpg") no-repeat center center;
}
.box4{
  background: url("../../assets/UP-4.jpg") no-repeat center center;
}


.mid{
  margin: 40px auto 40px auto;
  max-width: 1200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 17px;
  line-height: 36px;
  div{
    flex: 1;
    width: 50%;
    margin: 0 40px;
    display: flex;
    flex-direction: column;
    p{
      line-height: 26px;
      margin: 25px 0;
      span{
        font-weight: bold;
      }
    }
    ul{
      display: flex;
      flex-direction: column;
      li{
        /*margin-bottom: 15px;*/
        span{
          font-weight: bold;
        }
      }
    }
  }
}
.fangwen{
  text-align: center;
  margin: 50px auto 80px auto;
  a{
    padding: 18px 26px;
    background: #303030;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  a:hover{
    background: #3281c4;
  }
}


  .map{
    padding: 45px 0 90px 0;
    background: url("../../assets/oic/map_bg.jpg") no-repeat center center;
    background-size: 100% auto;
  }
  .map>div{
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 30px 25px 30px 30px;
    display: flex;
    flex-direction: row;
    div:nth-of-type(1){
      margin-right: 20px;
      .biaoji-size{
        display: block;
        width: 60px;
      }
    }
    div:nth-of-type(2){
      display: flex;
      flex-direction: column;
      padding-bottom: 70px;
      span{
        margin-bottom: 15px;
      }
    }
  }
</style>
